<template>
  <div class="table-view slim-view normal-shadow">
    <el-divider>el table v2</el-divider>
    <div style="height: 400px">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" />
        </template>
      </el-auto-resizer>
    </div>
    <el-divider>vxe table</el-divider>
    <div style="height: 400px; width: calc(100% - 5px); overflow-x: hidden; box-sizing: border-box">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <vxe-table border show-overflow :width="width - 100" :height="height" :row-config="{ isHover: true }" :data="tableData" :scroll-y="{ enabled: true }">
            <vxe-column type="checkbox" width="100"></vxe-column>
            <vxe-column type="seq" width="100"></vxe-column>
            <vxe-column field="name" title="Name"></vxe-column>
            <vxe-column field="role" title="Role"></vxe-column>
            <vxe-column field="sex" title="Sex"></vxe-column>
          </vxe-table>
        </template>
      </el-auto-resizer>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElButton, ElIcon, ElTag, ElTooltip, TableV2FixedDir } from 'element-plus'
import { Timer } from '@element-plus/icons-vue'

import type { Column, RowClassNameGetter } from 'element-plus'
interface RowVO {
  id: number
  name: string
  role: string
  sex: string
}

let id = 0

const dataGenerator = () => ({
  id: `random-id-${++id}`,
  name: 'Tom',
  date: '2020-10-1'
})

const columns: Column<any>[] = [
  {
    key: 'index',
    title: '序号',
    width: 150,
    align: 'center',
    cellRenderer: ({ rowIndex }) => <span>{rowIndex + 1}</span>
  },
  {
    key: 'date',
    title: 'Date',
    dataKey: 'date',
    width: 150,
    fixed: TableV2FixedDir.LEFT,
    cellRenderer: ({ cellData: date }) => (
      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
        {
          <span class="flex items-center">
            <ElIcon class="mr-3">
              <Timer />
            </ElIcon>
            {dayjs(date).format('YYYY/MM/DD')}
          </span>
        }
      </ElTooltip>
    )
  },
  {
    key: 'name',
    title: 'Name',
    dataKey: 'name',
    width: 150,
    align: 'center',
    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>
  },
  {
    key: 'operations',
    title: 'Operations',
    cellRenderer: () => (
      <>
        <ElButton size="small">Edit</ElButton>
        <ElButton size="small" type="danger">
          Delete
        </ElButton>
      </>
    ),
    width: 150,
    align: 'center',
    flexGrow: 1
  }
]

const data = ref(Array.from({ length: 200 }).map(dataGenerator))
//@ts-ignore
const rowClass = ({ rowIndex }: Parameters<RowClassNameGetter<any>>[0]) => {
  // if (rowIndex % 10 === 5) {
  //   return 'bg-red-100'
  // } else if (rowIndex % 10 === 0) {
  //   return 'bg-blue-200'
  // }
  return ''
}

const tableData = ref<RowVO[]>([])

setTimeout(() => {
  // 模拟数据
  const mockList: RowVO[] = []
  for (let index = 0; index < 500; index++) {
    mockList.push({
      id: index,
      name: 'Test' + index,
      role: 'Developer',
      sex: '男'
    })
  }
  tableData.value = mockList
}, 100)
</script>
<style lang="scss" scoped>
.table-view {
  height: 100%;
}
</style>
